<template>
	<view class="chart_box">
		<view class="chart_container">
			<view class="top">
				<view class="head">
					<image class="w-70rpx" src="@/static/ring/chart/blood.png" mode="widthFix"></image>
					<text class="title">血氧</text>
				</view>
				<view class="value">
					<text>{{ bloodValue }} %</text>
				</view>
			</view>

			<view class="chart">
				<l-echart ref="chartRef"></l-echart>
			</view>

			<view v-if="timeData.length == 2" class="chart_axis">
				<text>{{ timeData[0] }}</text>
				<text>{{ timeData[1] }}</text>
			</view>

			<view class="down">
				<button class="measure" @click="handleClick">
					<image class="w-40rpx" src="@/static/ring/chart/pulse.png" mode="widthFix"></image>
					<text class="text_gradient">测量</text>
				</button>
			</view>
		</view>
	</view>
</template>
<script>
import * as echarts from "echarts";
import dayjs from "dayjs";
import store from "@/store/index.js";
import { queryMyBloodOxInfoByDay } from "@/api/ring/chart.js";
import { removeTrailingZeros } from "@/js_sdk/utils/utils.js";

export default {
	props: {
		date: String,
	},

	data() {
		return {
			values: [],
			timeData: [],
			chartRef: null,
			chart: null,
			bloodValue: "-",
		};
	},

	computed: {
		isLogin() {
			return store.state.userToken;
		},

		max() {
			return this.values.filter((item) => item !== null).reduce((a, b) => Math.max(a, b), 0);
		},

		min() {
			return this.values.filter((item) => item !== null).reduce((a, b) => Math.min(a, b), this.max);
		},

		option() {
			return {
				color: ["#E5404F"],
				grid: {
					left: 3,
					right: 3,
					bottom: "0",
					top: "0",
					containLabel: false,
				},
				xAxis: [
					{
						show: false,
						type: "category",
						boundaryGap: false,
					},
				],
				yAxis: [
					{
						show: false,
						type: "value",
						min: this.min * 0.95,
						max: this.max,
					},
				],
				series: [
					{
						name: "血氧",
						type: "bar",
						barWidth: 6,
						itemStyle: {
							opacity: 1,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: "rgba(247, 61, 61, 1)",
								},
								{
									offset: 1,
									color: "rgba(247, 61, 61, 0)",
								},
							]),
							borderRadius: 90,
						},
						barCategoryGap: "44%",
						data: this.values,
					},
				],
			};
		},

		bloodOxygen() {
			return store.state.ringDataManage.bloodOxygen;
		},
	},

	watch: {
		date() {
			this.updateChartData(this.date);
		},

		bloodOxygen(nv) {
			const { bloodOxygen } = nv || {};
			if (bloodOxygen) {
				this.bloodValue = bloodOxygen;
			}
		},
	},

	async mounted() {
		if (this.$refs.chartRef && this.$refs.chartRef.init) {
			this.chartRef = this.$refs.chartRef;
			this.chart = await this.chartRef.init(echarts);
		}

		this.chart.setOption(this.option);
	},

	methods: {
		getTitle() {
			return 'blood';
		},
		handleClick() {
			this.$emit("onDetection", "blood");
		},

		updateChartData(date) {
			if (!this.isLogin) return;
			queryMyBloodOxInfoByDay({
				dateStr: dayjs(date || this.date).format("YYYY-MM-DD"),
				offsetMinutes: new Date().getTimezoneOffset(),
			}).then(async (res) => {
				console.log("queryMyBloodOxInfoByDay", res.data);
				const bloodData = res.data;
				this.bloodValue = bloodData?.average ? Math.round(bloodData.average) : "--";
				let data = removeTrailingZeros(bloodData?.rates || []);
				this.values = data.map((_) => {
					return _.value || null;
				});

				if (data.length) {
					this.timeData[0] = "0:00";
					this.timeData[1] = +data[data.length - 1].time + ":00";
				} else {
					this.timeData = [];
				}

				if (!this.chartRef) {
					this.chartRef = this.$refs.chartRef;
				}

				if (!this.chart) {
					this.chart = await this.chartRef.init(echarts);
				} else {
					this.chart.clear();
				}

				setTimeout(() => {
					this.chart.setOption(this.option);
				}, 100);
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.chart_box {
	width: 100%;
	height: 400rpx;
	color: rgba(0, 0, 0, 1);

	.w-70rpx {
		width: 70rpx;
	}

	.w-40rpx {
		width: 40rpx;
	}

	.chart_container {
		width: 100%;
		height: 100%;
		padding: 20rpx 30rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 22rpx;
		}

		.down {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-top: 20rpx;
		}

		.head {
			// width: 100%;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.title {
				font-size: 32rpx;
				font-weight: 600;
				text-align: left;
				margin-left: 12rpx;
			}
		}

		.value {
			color: rgba(255, 101, 101, 1);

			text {
				font-size: 48rpx;
				font-weight: 600;
				line-height: 68rpx;
				text-align: left;

				&.unit {
					font-size: 32rpx;
					line-height: 44rpx;
					margin-left: 8rpx;
				}
			}
		}

		.chart {
			width: 100%;
			height: 160rpx;
		}

		.chart_axis {
			width: 100%;
			height: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: rgba(0, 0, 0, 0.5);
			font-size: 20rpx;
			font-weight: 300;
		}

		.sub_value {
			width: 100%;
			height: 44rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-weight: 600;
			color: black;

			.title {
				margin-left: 12rpx;
			}

			.value {
				font-size: 32rpx;
				line-height: 44rpx;
				text-align: left;
				margin-left: 30rpx;
				color: black;
			}
		}
	}

	.measure {
		width: 240rpx;
		height: 60rpx;
		border-radius: 30rpx;

		line-height: 60rpx;
		text-align: center;

		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(180deg, rgba(45, 153, 255, 0.5) 0%, #2d99ff 100%);
		border: none;
		margin: unset;

		text {
			font-size: 32rpx;
			font-weight: 400;
		}
	}

	.text_gradient {
		color: white;
	}
}
</style>
